LOGICIELS
ActionScript > Menu déroulant
par : gwenola
Un menu déroulant
(d’après un exercice de Bertrand Gilles - Technocité)
1. Sur la scène principale, créez un nouveau Movie Clip (Ctrl/Pomme+F8). Nommez-le Menu déroulant.
2. Dans le scénario du clip, créez un Rectangle Noir sans Contour. Via l’Inspecteur des propriétés, attribuez-lui les mesures L 200.0 px x H 50.0 px et les coordonnées X 0.0 et Y 0.0.
3. Convertissez ce rectangle en bouton (F8). Nommez-le Bt_Menu. Puis double-cliquez sur le rectangle pour rentrer dans son imbrication de bouton. Dans le scénario du bouton, créez un nouveau calque, nommé Texte.
4. A l’état Haut - Up du calque Texte, activez l’outil Texte de la barre d’outils. Vérifiez, via l’Inspecteur des propriétés, que le mode de texte est bien défini à Statique. Puis tapez le titre : menu déroulant. Via l’Inspecteur des propriétés :
Attribuez le Blanc comme couleur.
Comme police : Helvetica ; Taille : 20 ; Crénage : 3.
Positionnez le texte : X et Y : 0.0.
5. A l’état Dessus - Over :
Dans
le calque Texte, créez une image clé (F6). Via l’Inspecteur des
propriétés, changez librement la couleur du texte.
Dans le calque du rectangle, créez une image (F5).
6. Tout en haut du scénario, au-dessus de la liste des calques, cliquez sur Menu déroulant pour remonter au niveau du Movie Clip (fig. 1). Nommez l’unique calque disponible Menu, puis créez-en un nouveau, placez-le sous le calque Menu et nommez-le Titre 1.
7. Dans ce nouveau calque, tracez un rectangle de couleur libre sans contour aux dimensions : L 130.0 et H 50.0.
Positionnez-le à X 165.0 et Y 0.0. Convertissez ce rectangle en bouton (F8) nommé Bt_Titres. Dans l’Inspecteur des propriétés, nommez cette instance de bouton Titre1. Puis double-cliquez sur ce rectangle pour accéder à son scénario de bouton.
8. Dans le scénario du bouton Titre1, créez un nouveau calque, nommé Texte, et tapez titre :
Police :
Helvetica ; taille : 20 ; Crénage : 10 ;
couleur : Blanc ; position : X et Y 0.0.
9. A l’état Dessus - Over :
Calque Texte : image clé (F6) et changez librement la couleur du texte via l’Inspecteur des propriétés.
Calque du rectangle : image (F5).
10. Tout en haut du scénario, au-dessus de la liste des calques, cliquez sur Menu déroulant pour remonter au niveau du Movie Clip. Là, créez un nouveau calque nommé Titre 2, au-dessus du calque Titre 1. Puis cliquez sur le rectangle du calque Titre 1 et copiez-le (Ctrl/Pomme+c). Sélectionnez ensuite le calque Titre 2 et collez le rectangle (Ctrl/Pomme+v). Dans l’Inspecteur des propriétés :
Position du nouveau rectangle : X 165.0 et Y 50.0 ;
Nommez cette instance de bouton Titre2 ;
Définissez
une nouvelle couleur librement : Color > Tint > cliquez sur
le carré de couleur pour choisir librement parmi les nuances
disponibles. Puis à droite de ce carré, pour le pourcentage de la
nouvelle teinte, entrez 50%.
11. Créez un nouveau calque au-dessus du calque Titre 2, nommé Titre 3. Copiez le bouton du calque Titre 1 et collez-le dans le nouveau calque. Dans l’Inspecteur des propriétés :
Position du nouveau rectangle : X 165.0 et Y 100.0 ;
Nommez cette instance de bouton Titre3 ;
Définissez
une nouvelle couleur librement : Color > Tint > cliquez sur
le carré de couleur pour choisir librement parmi les nuances
disponibles. Puis à droite de ce carré, pour le pourcentage de la
nouvelle teinte, entrez 60%.
12. Créez un nouveau calque au-dessus de Titre 3. Nommez-le Masque titres. Puis créez une image à l’image 20 pour tous les calques simultanément :
Dans
la ligne du temps, à hauteur de l’image 20 du calque du haut de la pile
(Menu), cliquez et faites glisser le curseur de souris vers le bas,
pour noiricir l’image correspondante de chaque calque.
Quand
toutes les cases de l’image 20 sont noircies, tapez F5 pour insérer une
nouvelle image dans tous les calques simultanément.
13. Dans le calque Masque titres :
Sélectionnez l’image 1 :
- Tracez un rectangle de couleur libre sans contour. Dimensions : L 150.0 et H 12.0 ; Position : X 165.0, Y - 40.0.
- Convertissez ce rectangle en Symbole Graphique (F8).
A l’image 10 :
- Tapez F6 pour insérer une image clé.
- Activez l’outil Transformation libre de la barre d’outil . Enfoncez Alt et redimensionnez le rectangle de sorte qu’il recouvre les 3 boutons titres (fig. 2).
A l’image 20 :
- Tapez F6 pour insérer une image clé. Enfoncez Alt et redimensionnez le rectangle de sorte qu’il retrouve à peu près sa taille initiale, au-dessus des 3 boutons (fig. 3).
Cliquez
entre l’image 1 et l’image 10 et créez une interpolation de mouvement
via l’Inspecteur des propriétés (Tween > Motion).
Cliquez
entre l’image 10 et l’image 20 et créez de la même manière une autre
interpolation de mouvement (fig. 4 pour l’aspect de la ligne du temps).
Double-cliquez
sur le carré de couleur à droite de l’intitulé du calque Masque titres
(fig. 4, entouré) : Type de calque > Masque.
14. Double-cliquez sur le carré de couleur à droite de l’intitulé des chacun des 3 calques Titres et changez le Type de calque en Masqué (fig. 5).
15. Tout en haut de la liste des calques, cliquez sur la flèche pour retourner sur la scène principale. Celle-ci est vide. Nous avons travaillé jusqu’ici dans un Movie Clip, indépendamment de la scène. Allez donc dans le menu Fenêtre - Window > Library - Bibliothèque et glissez une instance du Clip Menu déroulant depuis la bibliothèque sur la scène. Prévisualisez l’animation : Ctrl/Pomme+Enter.
Pour contrôler le déroulement de l’animation, reste à placer quelques actions, temporelles et boutons, et à créer un bouton invisible.
16. Double-cliquez sur le clip sur la scène principale pour entrer dans l’imbrication :
Créez un nouveau calque au-dessus du calque Menu, nommé Actions.
Puis ouvrez le panneau des Actions en cliquant sur le bouton fléché de l’Inspecteur des propriétés :
- Image 1, entrez le code suivant :
- Image 10, créez une image clé vide (F7) et entrez le code suivant :
- Image 20, créez une image clé vide (F7) et entrez le code suivant :
17. Créez un nouveau calque de type Normal (non masqué) tout en bas de la pile, nommé Bouton Invisible.
Créez un rectangle de couleur libre sans contour sur la scène, recouvrant largement l’ensemble des boutons. Puis convertissez-le en bouton (F8). Nommez-le Bt_Invisible. Double-cliquez sur le nouveau bouton pour rentrer dans son scénario :
Sélectionnez
l’image clé de l’état Haut et faites-la glisser jusqu’à l’état
Cliquable - Hit. Puis retournez sur le scénario du Movie Clip.
Sélectionnez l’image clé du calque Bouton Invisible et faites-la glisser à l’image 10 du même calque.
Cliquez
à l’image 11 de ce calque et créez une image clé vide (F7). Voyez la
figure 6 pour l’allure de la ligne du temps à ce stade.
Prévisualisez l’animation et constatez qu’il ne se passe plus rien : l’animation est bloquée à l’image 1.
18. Actions Boutons :
Cliquez
sur le bouton Menu déroulant sur la scène pour le sélectionner. Dans le
panneau Actions, entrez l’action :
Prévisualisez et constatez que l’animation se bloque à l’image 10.
Sélectionnez
l’image clé du calque Bouton Invisible, puis cliquez sur le bouton
Invisible sur la scène. Entrez l’action :
Prévisualisez l’animation et constatez que désormais, au survol du bouton Menu déroulant, les titres se déroulent, et au survol de la zone du bouton invisible, les titres se réenroulent. De plus, au survol de chacun des titres, l’intitulé correspondant change de couleur.

